آموزش جامع و مدرن ری‌اکت (React) از صفر تا صد - آخرین آپدیت

سرفصل ها و درس ها

مقدمه و شروع به کار Introduction & Getting Started

• خوش‌آمدگویی به دوره Welcome To The Course

• نحوه گذراندن این دوره How To Take This Course

• ری‌اکت چیست؟ What Is React?

• معماری اپلیکیشن ری‌اکت React App Architecture

• توسعه مبتنی بر کامپوننت Component-Based Development

• مقایسه ری‌اکت با جاوااسکریپت خام (Vanilla JS) React vs Vanilla JavaScript

• اکوسیستم ری‌اکت React Ecosystem

• ری‌اکت در پشت صحنه چگونه کار می‌کند؟ How React Works Under The Hood

• راه‌اندازی محیط توسعه Development Environment Setup

مرور مفاهیم جاوااسکریپت مرتبط با ری‌اکت React-Related JavaScript Refresher

• مقدمه بخش Section Intro

• توابع پیکانی (Arrow Functions) Arrow Functions

• Template Literals Template Literals

• رندرینگ Ternary و Short Circuit Ternary & Short Circuit Rendering

• تکنیک Destructuring و اپراتور Rest Destructuring & Rest Operator

• متدهای آرایه Array Methods

• اپراتورهای Optional Chaining و Nullish Coalescing Optional Chaining & Nullish Coalescing Operator

• تغییرناپذیری (Immutability) و اپراتور Spread Immutability & Spread Operator

• Promiseها و Async/Await Promises & Async Await

مبانی ری‌اکت – State، هوک‌ها، رویدادها، Props و بیشتر React Fundamentals – State, Hooks, Events, Props & More

• مقدمه بخش Section Intro

• راه‌اندازی سریع ری‌اکت و createElement Quick React Setup & createElement

• آشنایی با JSX Intro To JSX (JavaScript XML)

• راه‌اندازی ابزار ساخت Vite Vite Build Tool Setup

• ساخت کامپوننت‌ها Creating Components

• استایل‌دهی در ری‌اکت Styling In React

• کار با لیست‌ها Lists

• مدیریت رویدادها Handling Events

• مقدمه‌ای بر State Intro To State

• مدیریت وضعیت امتیازدهی Rating State

• مطالعه بیشتر درباره هوک useState More on UseState Hook

• رندرینگ و استایل‌دهی شرطی Conditional Rendering & Styling

• مفهوم Props Props

• ترکیب کامپوننت‌ها (Component Composition) Component Composition

• ثبت امتیاز Submit Rating

• ترکیب کامپوننت مودال (Modal) Modal Component Composition

• ارسال داده‌ها به عنوان Children Passing Data As Children

فرم‌ها، ورودی‌ها و کامپوننت‌های کنترل‌شده – پروژه اپلیکیشن یادداشت Forms, Input & Controlled Components – Notes App Project

• مقدمه بخش Section Intro

• راه‌اندازی اپلیکیشن و Tailwind CSS (v4) App & Tailwind Setup (v4)

• ورودی‌های کنترل‌شده Controlled Inputs

• شیء داده‌های فرم (Form Data Object) Form Data Object

• ارسال فرم و وضعیت سراسری (Global State) Form Submission & Global State

• نمایش یادداشت‌ها Show Notes

• ساخت فرم تاشو (Collapsible) Make Form Collapsible

• ساخت کامپوننت‌های ورودی قابل استفاده مجدد Reusable Input Components

• حذف یادداشت‌ها Delete Notes

• چالش رندرینگ شرطی Conditional Rendering Challenge

• مفهوم Prop Drilling Prop Drilling

چرخه حیات کامپوننت و هوک useEffect Component Lifecycle & useEffect Hook

• مقدمه بخش Section Intro

• توضیح چرخه حیات کامپوننت Component Lifecycle Explained

• کلاس‌ها و متدهای چرخه حیات Classes & Lifecycle Methods

• چرخه حیات و هوک useEffect Lifecycle & useEffect

• استفاده از LocalStorage به عنوان Side Effect LocalStorage Side Effect

هوک useRef – پروژه تایمر ساده useRef Hook – Simple Timer Project

• مقدمه بخش Section Intro

• هوک useRef چیست و راه‌اندازی پروژه What Is useRef & Project Setup

• کار با useRef و ورودی‌های کنترل‌نشده useRef In Action & Uncontrolled Inputs

• حفظ مقدار تایمر در هنگام رندر مجدد Persist Timer Across Re-Renders

• چالش ترکیب کامپوننت‌ها Component Composition Challenge

• فوکوس خودکار روی دکمه شروع Auto-Focus Start Button

• ذخیره تایمر در Local Storage Save Timer To Local Storage

کار با APIها – پروژه داشبورد کریپتو Working With APIs – Crypto Dash Project

• مقدمه بخش و پروژه Section & Project Intro

• اطلاعات API و راه‌اندازی پروژه API Info & Project Setup

• ارسال درخواست‌های HTTP Making HTTP Requests

• استفاده از Async/Await در useEffect Async/Await In useEffect

• نمایش داده‌های ارزهای دیجیتال Display Coin Data

• متغیرهای محیطی (Environment Variables) Environment Variables

• ساخت انتخاب‌گر محدودیت نمایش Limit Selector

• فیلتر کردن ارزها Filter Coins

• ساخت انتخاب‌گر ترتیب مرتب‌سازی Sort Order Selector

ری‌اکت روتور در حالت Declarative – توسعه پروژه داشبورد کریپتو React Router in Declarative Mode – Extend Crypto Dash Project

• مقدمه‌ای بر روتینگ Intro To Routing

• سینتکس React Router React Router Syntax

• ساخت مسیر صفحه اصلی Homepage Route

• صفحه درباره ما و کامپوننت Link About Page & Link Component

• صفحه یافت نشد (404) Not Found Page

• دریافت جزئیات ارز Fetch Coin Details

• نمایش جزئیات ارز Display Coin Details

• افزودن اسپینر بارگذاری Add Loading Spinner

• دریافت و قالب‌بندی داده‌های نمودار Get & Format Chart Data

• نمایش نمودار Show Chart

ساخت و استقرار (Build & Deploy) Build & Deploy

• مقدمه بخش Section Intro

• درک فرآیند Build Understanding The Build Process

• دستور Build The Build Command

• استقرار روی Vercel Deploy To Vercel

سیستم Context API – رابط کاربری سبد خرید Context API – Shopping Cart UI

• مقدمه بخش Section Intro

• سیستم Context API چیست؟ What Is the Context API?

• راه‌اندازی پروژه Project Setup

• راه‌اندازی JSON Server JSON Server Setup

• نمایش داده‌های محصولات Display Product Data

• تنظیم Proxy Setup Proxy

• ساخت Product Context Product Context

• ساخت Cart Context Cart Context

• دکمه افزودن به سبد خرید Add To Cart Button

• هدر و شمارنده سبد خرید Header & Cart Count

• منوی کشویی آیتم‌های سبد خرید Cart Items Dropdown

• حذف آیتم‌ها و پاک‌سازی سبد خرید Remove Items & Clear Cart

• ذخیره آیتم‌های سبد خرید در Local Storage Store Cart Items To Local Storage

ری‌اکت روتور در حالت Framework – پروژه Friendly Dev React Router Framework Mode – Friendly Dev Project

• مقدمه بخش و پروژه Section & Project Intro

• راه‌اندازی پروژه و ساختار فایل‌ها Project Setup & File Structure

• ساخت مسیرها (Routes) Creating Routes

• رفع خطای کنسول Devtools Devtools Console Error Fix

• مفهوم SSR و Client Hydration SSR & Client Hydration

• لینک‌ها و ناوبری Links & Navigation

• استایل‌دهی به لینک فعال Active Link Styling

• منوی ریسپانسیو Responsive Menu

• کامپوننت Hero Hero Component

• مقدمه‌ای بر تایپ‌ها (TypeScript) Introduction To Types (TypeScript)

• مسیرهای Layout Layout Routes

لودرها، فیلتر کردن، صفحه‌بندی و بیشتر Loaders, Filtering, Pagination & More

• بررسی کلی لودرها (Loaders) Loaders Overview

• دریافت پروژه‌ها با استفاده از Loader Fetch Projects With Loader

• ساخت تایپ Project Create Project Type

• نمایش داده‌های لودر Display Loader Data

• مسیرهای دینامیک و Client Loader Dynamic Route & Client Loader

• خروجی صفحه جزئیات Details Page Output

• صفحه‌بندی پروژه‌ها Project Pagination

• ساخت کامپوننت صفحه‌بندی Pagination Component

• فیلتر دسته‌بندی پروژه‌ها Project Category Filter

• انیمیشن فیلتر پروژه‌ها Animate Project Filter

• نمایش پروژه‌های منتخب Featured Projects

صفحات داخلی، Actionها و وبلاگ Markdown Inner Pages, Actions, Markdown Blog

• صفحه درباره ما About Page

• ساختار JSX صفحه تماس Contact Page JSX

• مثال از Actionهای React Router React Router Actions Example

• اعتبارسنجی فرم با Actionها Form Validation With Actions

• صفحه یافت نشد Not Found Page

• مارک‌داون (Markdown) چیست؟ What Is Markdown?

• دریافت متادیتای پست Fetch Post Meta

• نمایش متادیتای پست Display Post Meta

• پست تکی و مارک‌داون Single Post & Markdown

• نمایش صفحه جزئیات Display Details Page

• مرتب‌سازی پست‌ها بر اساس تاریخ Sort Posts By Date

• استفاده مجدد از کامپوننت صفحه‌بندی Re-Use Pagination Component

• فیلتر پست‌های وبلاگ Blog Post Filter

• نمایش آخرین پست‌های وبلاگ Latest Blog Posts

استفاده از Headless CMS Strapi برای محتوا – توسعه پروژه Friendly Dev Strapi Headless CMS for Content – Extending Friendly Dev Project

• توضیح Headless CMS Headless CMS Explained

• ساختار پوشه‌بندی فول‌استک Full Stack Folder Structure

• ساخت پروژه Strapi Create Strapi Project

• راه‌اندازی دیتابیس و پنل مدیریت Strapi Database & Strapi Admin Setup

• تعریف Content Type برای پروژه Project Content Type

• دسترسی به API Accessing The API

• دریافت پروژه‌ها از Strapi Fetch Projects From Strapi

• تعریف تایپ پروژه Strapi Strapi Project Type

• دریافت پروژه تکی از Strapi Fetch Individual Project From Strapi

• نمایش پروژه‌های منتخب در صفحه اصلی Home Featured Projects

• تعریف Content Type برای پست‌ها Post Content Type

• دریافت پست‌ها از Strapi Fetch Posts From Strapi

• دریافت جزئیات پست از Strapi Fetch Post Details From Strapi

• نمایش پست‌های صفحه اصلی از Strapi Homepage Posts From Strapi

تصاویر Cloudinary، فرم تماس و استقرار فول‌استک Cloudinary Images, Contact Form & Full Stack Deployment

• آپلود تصاویر در Cloudinary Upload Images To Cloudinary

• ساخت فرم تماس با Formspree.io Formspree.io Contact Form

• استقرار Strapi روی Render.com Deploy Strapi To Render.com

• استقرار فرانت‌اند روی Vercel Frontend Vercel Deployment

کتابخانه TanStack Query – پروژه جستجوی گیت‌هاب TanStack Query – GitHub Finder Project

• مقدمه بخش و پروژه Section Intro & Project Intro

• کتابخانه TanStack Query چیست؟ What Is TanStack Query?

• راه‌اندازی پروژه و Query Client Project Setup & Query Client

• اتصال به API گیت‌هاب GitHub API Integration

• ارسال کوئری‌ها با هوک useQuery Making Queries With useQuery Hook

• پاک‌سازی کدها Clean Up Code

• نصب Devtools مربوط به React Query React Query Devtools Install

• پیاده‌سازی قابلیت جستجوهای اخیر Recent Searches Feature

• بحث در مورد مدیریت State Let's Chat About State

• پیش‌دریافت داده‌ها (Prefetching) با TanStack Query Prefetching Data With TanStack Query

• ذخیره کاربران اخیر در Local Storage Save Recent Users To Local Storage

• نمایش پیشنهادات کاربر Show User Suggestions

• کامپوننت منوی کشویی پیشنهادات Suggestions Dropdown Component

• توکن API و اطلاعات مهم امنیتی API Token & Important Security Information

• بررسی وضعیت فالو بودن کاربر Check If User Is Following

• استفاده از Mutation برای فالو کردن Mutations – Follow User

• استفاده از Mutation برای آنفالو کردن Mutations – Unfollow User

• اعلان‌های Toast Toast Notifications

کتابخانه TanStack Router – پروژه IdeaDrop TanStack Router – IdeaDrop Project

• مقدمه بخش و پروژه Section & Project Intro

• آشنایی با TanStack Router Intro To TanStack Router

• راه‌اندازی پروژه Project Setup

• ساخت مسیرها (Routes) Creating Routes

• مدیریت Head و Meta Head & Meta

• استفاده از Mock REST API Mock REST API

• دریافت داده‌ها با لودرهای TanStack Router Fetch Data With TanStack Router Loaders

• تنظیم Vite Proxy و رفع خطاهای Config Vite Proxy & Fix Config Errors

• راه‌اندازی TanStack Query و QueryClient TanStack Query & QueryClient Setup

• استفاده از TanStack Query برای دریافت ایده‌ها Use TanStack Query To Fetch Idea

• نصب و استفاده از Axios Install & Use Axios

• دریافت و نمایش ایده‌ها Fetch & Display Ideas

• هدر و ساختار اصلی (Main Layout) Header & Main Layout

• صفحه یافت نشد Not Found Page

• چالش طراحی صفحه اصلی Homepage Challenge

• کامپوننت IdeaCard IdeaCard Component

• ساخت فرم ایجاد ایده Create Idea Form

• استفاده از Mutation برای ایجاد ایده Create Idea Mutation

• حذف ایده‌ها Delete Ideas

• فرم ویرایش ایده Idea Edit Form

• استفاده از Mutation برای بروزرسانی ایده Update Idea Mutation

استک MERN – بک‌اند Express API و دیتابیس MongoDB MERN Stack – Backend Express API & MongoDB Database

• مقدمه بخش Section Intro

• استک MERN چیست؟ What Is The MERN Stack?

• مقایسه Monorepo و مخازن مجزا Monorepo vs Separate Repos

• راه‌اندازی اولیه سرور Express Basic Express Server Setup

• ساخت End-pointهای سرور Creating Server Endpoints

• مدیریت فایل‌های روت Route Files

• ساخت مدیریت خطای سفارشی (Error Handler) Custom Error Handler

• راه‌اندازی MongoDB Atlas (دیتابیس ابری) MongoDB Atlas Setup (Cloud Database)

• راه‌اندازی MongoDB Compass و وارد کردن داده‌ها MongoDB Compass Setup & Data Import

• اتصال به دیتابیس با استفاده از Mongoose Connect To Database Using Mongoose

• ساخت مدل و دریافت ایده‌ها Model & Fetch Ideas

• ایجاد ایده جدید Create New Idea

• حذف و بروزرسانی ایده‌ها Delete & Update Ideas

• اتصال فرانت‌اند و بک‌اند Integrating The Frontend & Backend

• محدودسازی و مرتب‌سازی در سطح API Limit & Sort At API Level

احراز هویت API با JWT و Refresh Tokenها API Authentication With JWT & Refresh Tokens

• توکن‌های JWT چیستند؟ What Are JWTs?

• توضیح استراتژی Access و Refresh Token Access & Refresh Token Strategy Explained

• مدل کاربر و هش کردن رمز عبور User Model & Password Hashing

• ساخت End-point ثبت‌نام کاربر User Register Endpoint

• تولید توکن‌های Access و Refresh Generate Access & Refresh Tokens

• ساخت End-point خروج و پاک‌سازی کوکی Logout Endpoint & Clear Cookie

• ساخت End-point ورود Login Endpoint

• استفاده از Refresh Token Use Refresh Token

• محافظت از مسیرها (Protecting Routes) Protecting Routes

• مجوز کاربر و کنترل دسترسی User Authorization & Access Control

احراز هویت کامل فول‌استک Full Stack Authentication

• توضیح جریان کامل احراز هویت فول‌استک Full Stack Auth Flow Explained

• صفحات و ساختار احراز هویت Auth Pages & Layout

• ساخت Auth Context Auth Context

• ثبت‌نام کاربر Register User

• ورود کاربر Login User

• لینک‌های ناوبری شرطی Conditional Nav Links

• خروج کاربر Logout User

• بروزرسانی توکن هنگام رفرش صفحه Refresh Token On Page Refresh

• ارسال توکن در درخواست‌ها با Axios Interceptor Send Token With Request Using Axios Interceptor

• بروزرسانی توکن هنگام انقضا Refresh Token When It Expires

• مخفی‌سازی کنترل‌ها Hide Controls

استقرار اپلیکیشن MERN MERN App Deployment

• آماده‌سازی برای استقرار Prepare For Deployment

• استقرار API بک‌اند Backend API Deployment

• استقرار فرانت‌اند Frontend Deployment